<ui:composition template="template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:define name="head">
        <meta charset="UTF-8"></meta>
        <title>首页</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></link>
        <link rel="stylesheet" href="./css/home.css"></link>
        <link rel="stylesheet" href="./stylesheets/bootstrap-table.min.css"/>
        <script src="./javascripts/jquery-1.11.2.min.js"></script>
        <script src="./javascripts/bootstrap-table.min.js"></script>
        <script src="./javascripts/bootstrap.min.js"></script>
        <script src="./javascripts/home.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#mytab').bootstrapTable({
                    striped: false, //是否显示行间隔色
                    pageNumber: 1, //初始化加载第一页
                    pagination: true,//是否分页
                    sidePagination: 'client',//server:服务器端分页|client：前端分页
                    pageSize: 10,//单页记录数
                    pageList: [5, 10, 20, 30, 50],//可选择单页记录数
                    data: JSON.parse($("#jobsJson").val()),
                    columns: [
                        {
                            title: '任务名称',
                            field: 'name',
                            halign: 'center',
                            cellStyle() {
                                return {css: {"text-align": "center"}}
                            }
                        },
                        {
                            title: '最近执行状态',
                            field: 'status',
                            halign: 'center',
                            cellStyle: function (value, row, index) {
                                if (value === "SUCCESS") {
                                    return {css: {"background-color": "green", "text-align": "center"}}
                                } else if (value === "RUNNING") {
                                    return {css: {"background-color": "#0080C0", "text-align": "center"}}
                                } else {
                                    return {css: {"background-color": "red", "text-align": "center"}}
                                }
                            },
                            formatter: function (value, row, index) {
                                return "SUCCESS" === value ? "成功" : ("FAILURE" === value ? "失败" : ("FAILURE" === value ? "挂起" : ("RUNNING" === value ? "运行中" : "未知")));
                            }
                        },
                        {
                            title: '最近开始时间',
                            field: 'beginTime',
                            halign: 'center',
                            cellStyle() {
                                return {css: {"text-align": "center"}}
                            }
                        },
                        {
                            title: '最近结束时间',
                            field: 'endTime',
                            halign: 'center',
                            cellStyle() {
                                return {css: {"text-align": "center"}}
                            }
                        },
                        {
                            title: '耗时（ms）',
                            field: 'cost',
                            halign: 'center',
                            cellStyle() {
                                return {css: {"text-align": "center"}}
                            }
                        },
                        {
                            title: 'resultId',
                            field: 'resultId',
                            visible: false
                        },
                        {
                            title: 'triggerType',
                            field: 'triggerType',
                            visible: false
                        },
                        {
                            title: 'triggerBy',
                            field: 'triggerBy',
                            visible: false
                        },
                        {
                            title: 'logOutput',
                            field: 'logOutput',
                            visible: false
                        },
                        {
                            title: 'url',
                            field: 'url',
                            visible: false
                        }
                    ],
                    onClickCell: function (field, value, row, $element) {
                        let hosturl = window.location.pathname;
                        hosturl = hosturl.substring(0, hosturl.lastIndexOf('/'));
                        $("#log_title").text('\'' + row.name + '\'');
                        $("#log_status").text(row.status);
                        $("#log_beginTime").text(row.beginTime);
                        $("#log_endTime").text(row.endTime);
                        $("#log_triggerType").text(row.triggerType);
                        $("#log_triggerBy").text(row.triggerBy);
                        $("#log_logOutput").text(row.logOutput);
                        $("#log_resultId").text(row.resultId);
                        $('#log_resultId').attr('href', hosturl + row.url);
                        $('#log_resultId').attr('target','_blank');
                        $('#myModal').modal("show");
                        if("FAILURE" === row.status){
                            $('#log_resultId').removeAttr('href');
                            $('#log_resultId').removeAttr('target');
                        }
                    }
                });
            });
        </script>
    </ui:define>

    <ui:define name="content">

        <div style="width: 100%;margin-top: 2px">
            <div class="Row" style="border:1px #000000 solid;width: 60%;float:left">
                <p class="sp1">总体情况</p><br/>

                <div class="Column">
                    <div onclick="showTotalJobs('myTotalJobs')">
                        <img src="images/1.png" class="pc"/>
                    </div>
                    <span class="row1">任务总数</span><br/>
                    <span class="row1">#{tenantContext.jobNum}</span>
                </div>

                <div class="Column">
                    <div onclick="showTotalJobs('myDatastores')">
                        <img src="images/2.png" class="pc"/>
                    </div>
                    <span class="row1">数据源</span><br/>
                    <span class="row1">#{jsfHelper.datastoresNum}</span>
                </div>

                <div class="Column">
                    <div onclick="showTotalJobs('myTimeLines')">
                        <img src="images/3.png" class="pc"/>
                    </div>
                    <span class="row1">时间曲线分析</span><br/>
                    <span class="row1">#{tenantContext.timelineFolder.groupsNum}</span>
                </div>

            </div>

            <div class="Row" style="border:1px #000000   solid;width: 39%;float:right;">
                <p class="sp1">今日运行</p><br/>

                <div class="Column">
                    <img src="images/4.png" class="pc"/>
                    <span class="row1">运行任务</span><br/>
                    <span class="row1">#{tenantContext.resultFolder.filesNum}</span>
                </div>

                <div class="Column">
                    <img src="images/5.png" class="pc"/>
                    <span class="row1">运行结果</span><br/>
                    <span class="row1">#{tenantContext.resultFolder.filesNumTd}</span>
                </div>
            </div>
        </div>

        <div style="background-color: #0080C0;margin-top: 10px;clear:both">
            <span></span>
        </div>

        <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            <label>任务名称: </label>
                            <label id="log_title"></label>
                        </h4>
                    </div>
                    <div class="modal-body">

                        <div class="row">
                            <span class="col-xs-3">状态:</span>
                            <label class="col-xs-9" id="log_status"/>
                        </div>

                        <div class="row">
                            <span class="col-xs-3">开始时间:</span>
                            <label class="col-xs-9" id="log_beginTime"/>
                        </div>

                        <div class="row">
                            <span class="col-xs-3">结束时间:</span>
                            <label class="col-xs-9" id="log_endTime"/>
                        </div>

                        <div class="row">
                            <span class="col-xs-3">启动:</span>
                            <label class="col-xs-9" id="log_triggerType"/>
                        </div>

                        <div class="row">
                            <span class="col-xs-3">被谁启动:</span>
                            <label class="col-xs-9" id="log_triggerBy"/>
                        </div>

                        <div class="row">
                            <span class="col-xs-3">日志输出:</span>
                            <textarea class="col-xs-9" id="log_logOutput"></textarea>
                        </div>

                        <div class="row" style="margin-top: 25px;">
                            <span class="col-xs-3">结果:</span>
                            <div class="col-xs-9">
                                <a class="FormValue" target="_blank" id="log_resultId"/>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!--        <div class="modal fade bs-example-modal-lg" id="myTotalJobs" tabindex="-1" role="dialog"-->
        <!--             aria-labelledby="myModalLabel">-->
        <!--            <div class="modal-dialog" role="document">-->
        <!--                <div class="modal-content">-->
        <!--                    <div class="modal-header">-->
        <!--                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
        <!--                            <span aria-hidden="true">×</span>-->
        <!--                        </button>-->
        <!--                        <h4 class="modal-title" align="center" style="font-size: 20px;color: #16c2f4">任务总数</h4>-->
        <!--                    </div>-->
        <!--                    <div class="modal-body">-->
        <!--                        <c:forEach items="#{tenantContext.jobsName}" var ="li">-->
        <!--                            <div class="row" style="text-decoration: underline;margin-left: 20px">-->
        <!--                                ${li}-->
        <!--                            </div>-->
        <!--                        </c:forEach>-->
        <!--                    </div>-->
        <!--                    <div class="modal-footer">-->
        <!--                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="modal fade bs-example-modal-lg" id="myTotalJobs" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" align="center" style="font-size: 20px;color: #16c2f4">任务总数</h4>
                    </div>
                    <div class="modal-body">
                        <ul class="repositoryView">
                            <c:forEach items="#{tenantContext.jobsName}" var="name">
<!--                                <div class="row" style="text-decoration: underline;margin-left: 20px;color: #2aabd2"-->
<!--                                     onclick="showXml(this.firstChild.textContent.toString())">-->
<!--                                    ${name}-->
<!--                                </div>-->
                                <div class="row">
                                    <a id="openXml" href="javascript:void(0);"
                                       style="text-decoration: underline;margin-left:
                                    20px;" onclick="showXml(this)" >${name}</a>
                                </div>
                            </c:forEach>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade bs-example-modal-lg" id="myDatastores" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" align="center" style="font-size: 20px;color: #16c2f4">数据源</h4>
                    </div>
                    <div class="modal-body">
                        <c:forEach items="#{jsfHelper.datastoresName}" var="li">
                            <div class="row" style="text-decoration: underline;margin-left: 20px">${li}</div>
                        </c:forEach>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade bs-example-modal-lg" id="myTimeLines" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" align="center" style="font-size: 20px;color: #16c2f4">时间曲线分析</h4>
                    </div>
                    <div class="modal-body">
                        <c:forEach items="#{tenantContext.timelineFolder.groupsName}" var="li">
                            <div class="row" style="text-decoration: underline;margin-left: 20px">${li}</div>
                        </c:forEach>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <input id="usertenant" value="#{user.tenant}" style="display: none"></input>
        <input id="filesNames" value="#{tenantContext.jobFolder.files}" style="display: none"></input>
        <input id="jobsJson" value="#{tenantContext.jobsJson}" style="display: none"></input>
        <div style="margin-top: 10px;clear:both;height: 520px">
            <p class="sp1">任务执行日志</p>
            <table id="mytab" class="table table-hover" style="background-color: white"></table>
        </div>

    </ui:define>

</ui:composition>